<template>
	<div class="main-content">
		<!-- 欢迎语 -->
		<div class="welcome">
			<h2>欢迎回来，管理员</h2>
		</div>
		<!-- 数据统计卡片 -->
		<div class="stats-cards">
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="card">
						<div class="title">累计访问人数</div>
						<div class="value" style="color: #e67e22;">{{statistics.count}}</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="card">
						<div class="title">座位总数量</div>
						<div class="value" style="color: #e67e22;">{{statistics.seatAll}}</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="card">
						<div class="title">今日预约量</div>
						<div class="value" style="color: #e67e22;">{{statistics.orderDayNum}}</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="card">
						<div class="title">剩余座位数</div>
						<div class="value" style="color: #e67e22;">{{statistics.seatFree}}</div>
					</div>
				</el-col>
			</el-row>
		</div>

		<!-- 图书借阅趋势图（可以使用 ECharts 或静态图表） -->
		<div class="chart-section">
			<h3>近期系统访问量</h3>
			<div ref="mydiv" class="chart-placeholder">
				<!-- 此处可以嵌入 ECharts 图表 -->
				<p>图表占位符 - 可显示近一周借阅数据趋势</p>
			</div>
		</div>

		<!-- 最新公告或待办事项 -->
		<!-- <div class="todo-section">
			<h3>最新公告 / 待办事项</h3>
			<ul>
				<li>【系统维护】本周六凌晨进行服务器升级</li>
				<li>【活动通知】暑期读书月活动即将开始</li>
				<li>【待处理】有3条用户反馈需要回复</li>
				<li>【提醒】部分图书已到归还期限，请催还</li>
			</ul>
		</div> -->
	</div>
</template>

<script>
	import * as echarts from 'echarts';

	export default {
		name: "Home",
		data() {
			return {
				user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
				dateForm: [],
				dateKey:[],
				dateValue:[],
				statistics:{}
			}
		},
		created() {
			this.loadData()
			// this.setCharts()
		},
		methods: {
			loadData() {
				this.request.get("/statistics/home").then(res => {
					if (res.code == '200') {
						this.dateForm = res.data;
						this.dateKey=this.dateForm.map(v=>v.createTime)
						this.dateValue=this.dateForm.map(v=>v.count)
						console.log(res.data)
						console.log(this.dateKey)
						this.setCharts()
						
					}
				})
				
				this.request.get("/statistics/data").then(res => {
					if (res.code == '200') {
						this.statistics=res.data
						console.log(res.data)
					}
				})
			},
			setCharts() {
				let myChart = this.$echarts.init(this.$refs.mydiv);
				let option = {
					xAxis: {
						type: 'category',
						data: this.dateKey
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: this.dateValue,
						type: 'line'
					}]
				};
				myChart.setOption(option);
			}
		}
	}
</script>

<style scoped>
	.chart-section{
		margin: 10px 0 10px 0;
		
	}
	.main-content {
		padding: 20px;
	}

	.welcome h2 {
		margin-bottom: 10px;
	}

	.stats-cards .card {
		margin-top: 5px;
		background-color: #f9f9f9;
		padding: 20px;
		border-radius: 8px;
		text-align: center;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.card .title {
		font-size: 14px;
		color: #666;
		margin-bottom: 10px;
	}

	.card .value {
		font-size: 24px;
		font-weight: bold;
		color: #333;
	}

	.chart-placeholder {
		background-color: #fff;
		padding: 20px;
		border: 1px solid #eee;
		border-radius: 6px;
		text-align: center;
		height: 400px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
	}

	.todo-section ul {
		list-style: none;
		padding-left: 0;
	}

	.todo-section li {
		padding: 8px 0;
		border-bottom: 1px dashed #eee;
	}
</style>